<template>
  <div>
    <RePage>
      <MyFormCreate :clear-event="getTableList" v-model="searchFrom" :rule="searchFormRules" :key="key">

        <template #field-productId="scope">
          <getProductNoIDTypeSelectList v-model="searchFrom.productId" clearable :placeholder='prompt?.productId'
            :style="{ width: '100%' }" @change="(v) => scope.data.model.callback(v)" @clear="getTableList" />
        </template>
        <template #field-expireDate="scope">
          <el-form-item>
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              value-format="YYYY-MM-DD" placeholder="请选择创建时间" style="width: 100%;" v-model="searchFrom.createdAt"
              @change="dateChange" />
          </el-form-item>
        </template>
        <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>
        <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
      </MyFormCreate>

      <pure-table class="mt-0 " :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border
        @selection-change="selectionChange" :isShowPag="false">
        <template #alarmType="{ row }">
            <el-tag :type="ALARMTYPES[row.alarmType]?.type">{{ isNullOrEmpty( ALARMTYPES[row.alarmType]?.label ) }}</el-tag>

        </template>
        <template #confirm="{ row }">
          <el-tag :type="CONFIRMSTATUSTEXT[row.confirm]?.type">{{ isNullOrEmpty( CONFIRMSTATUSTEXT[row.confirm]?.label ) }}</el-tag>

        </template>
        <template #dealStatus="{ row }">
          {{ isNullOrEmpty( HANDLESTATUSTEXT[row.dealStatus]?.label ) }}

        </template>
        <template #action="{ row }">
          <el-space>

            <sj-link custom-type="sblue" :underline="false" @click="info(row)">查看</sj-link>
          </el-space>
        </template>
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>
    </RePage>
  </div>
</template>
<script lang="ts" setup>
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import MyFormCreate from "@/components/MyFormCreate/index.vue";
import RePage from "@/components/RePage/index.vue";
import infos from "./info.vue";
import { reactive, ref, h } from 'vue';
import { PAGE_LAYOUT } from '@/constant';
import { getList, getInfo, } from '@/api/manage/Individual-management/alarm-log/index';
import { titles, defaultSearchForm, prompt, defaultInfoForm } from './index';
import { addDialog } from "@/components/ReDialog";
import { deviceDetection, debounce } from "@pureadmin/utils";
import { ALARMTYPE, ALARMTYPES, CONFIRMSTATUSTEXT, CONFIRMSTATUS, HANDLESTATUS, EVENTLEVEL, HANDLESTATUSTEXT } from "@/constant/alarm-mangenment";
import getProductNoIDTypeSelectList from '@/components/select/dviceProductType/dviceProductTypeSelect.vue'

const searchFrom = ref(defaultSearchForm());
const key = ref(0);
const showInfo = ref();
const formRef = ref();
const tableData = reactive({
  data: [],
  total: 0,
});

const searchFormRules = [
  {
    type: 'input', field: 'deviceSN', title: titles.deviceSN, value: null, props: {
      placeholder: prompt.deviceSN, clearable: true
    }
  },
  {
    type: 'input', field: 'alarmTitle', title: titles.alarmTitle, value: null, props: {
      placeholder: prompt.alarmTitle, clearable: true
    }
  },
  {
    type: 'select', field: 'alarmType', title: titles.alarmType, value: null, options: ALARMTYPE, props: {
      placeholder: prompt.alarmType, clearable: true
    }
  },
  // {
  //   type: 'select', field: 'confirm', title: titles.confirm, value: null, options: CONFIRMSTATUS, props: {
  //     placeholder: prompt.confirm, clearable: true
  //   }
  // },
  {
    type: 'input', field: 'nickname', title: '个体名称', value: null, props: {
      placeholder: '请输入个体名称', clearable: true
    }
  },
  // {
  //   type: 'select', field: 'dealStatus', title: titles.dealStatus,
  //   value: null,
  //   options: HANDLESTATUS, props: {
  //     placeholder: prompt.dealStatus, clearable: true
  //   }
  // },
  {
    type: 'fieldComponent', field: 'productId',
    title: titles.productId, value: null,
    options: getProductNoIDTypeSelectList, props: {
      placeholder: prompt.productId, clearable: true
    }
  },
  {
    type: 'fieldComponent', field: 'expireDate', title: titles.createdAt, value: null, props: {
      placeholder: prompt.createdAt, clearable: true
    }
  },
  {
    type: 'select', field: 'alarmLevel', title: titles.alarmLevel,
    value: null,
    options: EVENTLEVEL, props: {
      placeholder: prompt.alarmLevel, clearable: true
    }
  },
  { type: 'number', field: 'page', title: 'page', hidden: true },
  { type: 'number', field: 'limit', title: 'limit', hidden: true },
];
const selectionData = ref([]);
const roleTableConfig = [
  { prop: 'id', label: titles.id, width:  100, fixed: 'left' },
  { prop: 'unityName', label: titles.unityName, minWidth: 150 },
  { prop: 'nickname', label: '所属个体', minWidth: 150 },
  { prop: 'place', label: titles.place, minWidth: 150 },
  { prop: 'productName', label: titles.productName, minWidth: 150 },
  { prop: 'deviceSN', label: titles.deviceSN , minWidth: 150},
  { prop: 'alarmTitle', label: titles.alarmTitle, minWidth: 150 },
  { slot: 'alarmType', label: titles.alarmType, minWidth: 100 },
  // { slot: 'confirm', label: titles.confirm, minWidth: 100 },
  // { slot: 'dealStatus', label: titles.dealStatus, minWidth: 100 },
  { prop: 'createdAt', label: titles.createdAt, minWidth: 160 },
  { slot: 'action', label: titles.action, width: 80, fixed: 'right' },
];
onMounted(() => {
  getTableList()
});
const dateChange = (e) => {
  console.log(e);
  if (e) {
    searchFrom.value.startTime = e[0];
    searchFrom.value.endTime = e[1];
  } else {
    searchFrom.value.startTime = '';
    searchFrom.value.endTime = '';
  }
  getTableList()
}
// 获取列表数据
const getTableList = () => {
  getList(searchFrom.value).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  })
}
// 重置搜索栏
const resetting = () => {//点击重置按键
  Object.assign(searchFrom.value, defaultSearchForm())
  key.value++
  getTableList()
}
// 详情
const info = (row) => {
  addDialog({
    title: `详情`,
    hideFooter: true,
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(infos, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        formInline: defaultInfoForm()
      }
      getInfo({ id: row.id }).then(res => {
        if (res.code == 200) {
          showInfo.value = res.result
          options.props.formInline = res.result
        }
      }).finally(() => {
        options.props.isLoading = false
      })
    },
  });
}



const selectionChange = data => {
  selectionData.value = data;
};
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
// 重置
const DebounceResetting = debounce(resetting, 1000, true);

</script>
<style lang="scss" scoped></style>
